<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flutter WebView 交互演示</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .btn {
          padding: 10px 15px; margin: 5px;
          background: #0078d7; color: white;
          border: none; border-radius: 4px;
          cursor: pointer;
        }
        .btn:hover { background: #106ebe; }
        #result {
          margin-top: 20px; padding: 15px;
          border: 1px solid #ddd; border-radius: 4px;
          min-height: 60px;
        }
        .error { color: red; }
    </style>
</head>
<body>
<h2>Flutter WebView 交互演示</h2>

<div>
    <button class="btn" onclick="getTimestamp()">获取时间戳</button>
    <button class="btn" onclick="closeWindow()">关闭窗口</button>
    <button class="btn" onclick="isFullScreen()">是否全屏</button>
    <button class="btn" onclick="setFullScreen()">设置全屏</button>
    <button class="btn" onclick="setActionBar()">设置ActionBar</button>
    <button class="btn" onclick="getVolume()">当前音量</button>
    <button class="btn" onclick="setVolume()">设置音量</button>
</div>

<div id="result">等待操作...</div>

<script>
    function updateResult(content, isError = false) {
      const resultDiv = document.getElementById('result');
      resultDiv.innerHTML = isError
        ? `<div class="error">${content}</div>`
        : content;
    }

    function getTimestamp() {
      updateResult(`
        <strong>获取时间戳...</strong>
      `);
      flutter.call('timestamp', {}, (result, error) => {
        if (error) {
          updateResult(error, true);
          return;
        }
        updateResult(`
          <strong>${result}</strong>
        `);
      });
    }

    function closeWindow() {
      updateResult(`
        <strong>关闭窗口...</strong>
      `);
      flutter.call('close', {}, (result, error) => {
        if (error) {
          updateResult(error, true);
          return;
        }
        updateResult(`
          <strong>${result}</strong>
        `);
      });
    }

    function isFullScreen() {
      updateResult(`
        <strong>是否全屏...</strong>
      `);
      flutter.call('isFullScreen', {}, (result, error) => {
        if (error) {
          updateResult(error, true);
          return;
        }
        updateResult(`
          <strong>${result}</strong>
        `);
      });
    }

    function setFullScreen() {
      updateResult(`
        <strong>设置全屏...</strong>
      `);
      const input = prompt('输入是否全屏 (true/false)', 'true');
      const isFullScreen = input === 'true';
      flutter.call('setFullScreen', { isFullScreen: isFullScreen }, (result, error) => {
        if (error) {
          updateResult(error, true);
          return;
        }
        updateResult(`
          <strong>${result}</strong>
        `);
      });
    }

    function setActionBar() {
      updateResult(`
        <strong>设置ActionBar...</strong>
      `);
      const type = 'home'; // eg: 'login' -> '登录页'、 'home' -> '首页'、 'back' -> '返回页'、 'pure' -> '只含有右侧三按钮'
      const title = '这是标题'; // eg: '标题'
      const isWhite = true; // eg: true/false
      const onDownloads = 'onDownloads()'; // eg: 'function()'
      const onSettings = null; // eg: 'function()'
      const onBack = null; // eg: 'function()'
      const onClose = null; // eg: 'function()'
      flutter.call('setActionBar', { type, title, isWhite, onDownloads, onSettings, onBack, onClose }, (result, error) => {
        if (error) {
          updateResult(error, true);
          return;
        }
        updateResult(`
          <strong>${result}</strong>
        `);
      });
    }

    function onDownloads() {
      updateResult(`
        <strong>我是下载触发函数</strong>
      `);
    }

    // Get the current volume level. From 0.0 to 1.0.
    function getVolume() {
      updateResult(`
        <strong>当前音量...</strong>
      `);
      flutter.call('getVolume', {}, (result, error) => {
        if (error) {
          updateResult(error, true);
          return;
        }
        updateResult(`
          <strong>${result}</strong>
        `);
      });
    }

    // Set the volume level. From 0.0 to 1.0.
    function setVolume() {
      updateResult(`
        <strong>设置音量...</strong>
      `);
      const volume = prompt('输入音量', '0.5');
      if (volume) {
        flutter.call('setVolume', { volume }, (result, error) => {
          if (error) {
            updateResult(error, true);
            return;
          }
          updateResult(`
            <strong>${result}</strong>
          `);
        });
      }
    }
</script>
</body>
</html>